<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品管理</title>
<link rel="stylesheet" href="../webjars/layui/2.5.6/css/layui.css"
	media="all">
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 20px;">
		<legend>浏览商品</legend>
	</fieldset>
	<div id="tb">
		<!-- 条件 -->
		<form class="layui-form" action="">
			<input type="text" placeholder="请输入商品名称" autocomplete="off" class="layui-input"
				v-model="pname" style="display: inline; width: 150px">
			<input type="text" placeholder="请输入价格" autocomplete="off" class="layui-input" 
				v-model="shopPrice" style="display: inline; width: 150px">
			<button class="layui-btn" @click.prevent="query">查询</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</form>

		<!-- 表格 -->
		<table class="layui-table">
			<colgroup>
				<col width="150">
				<col width="150">
				<col width="200">
				<col>
			</colgroup>
			<thead>
				<tr>
					<th>序号</th>
					<th>商品名</th>
					<th>价格</th>
					<th>热卖</th>
					<th>图片</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for=" (p,i) in plist">
					<td>{{i+1}}</td>
					<td>{{p.pname}}</td>
					<td>{{p.shopPrice}}</td>
					<td>{{p.isHot}}</td>
					<td>{{p.image}}</td>
				</tr>
			</tbody>
		</table>
		<div id="pg"></div>
	</div>

	<script src="../webjars/layui/2.5.6/layui.all.js" charset="utf-8"></script>
	<script src="../js/vue.min.js"></script>
	<script type="text/javascript"
		src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
	<script type="text/javascript">
		var v = new Vue({
			el : "#tb",
			data : {
				plist : [],
				total : 0,
				pname : "",
				shopPrice : 0
			},
			created(){
				let url = "../product/page.s?page=1&size=10";
				axios.get(url).then(res=>{
					this.plist = res.data.list;
					//总页数大于页码总数
					  layui.laypage.render({
					    elem: 'pg'
					    ,count: res.data.total //数据总数
					    // jump 是点击分页控件执行方法
					    ,jump: obj=>{
					    	url = "../product/page.s?page="+obj.curr+"&size=10";
					    	axios.get(url).then(res=>{
					    		this.plist = res.data.list;
					    	});
					    }
					  });
				})
			},
			methods: {
				query(){
					let url = "../product/page.s?page=1&size=10";
					url += this.pname ? ("&pname=" + this.pname) : "";
					url += this.shopPrice ? ("&shopPrice=" + this.shopPrice) : "";
					axios.get(url).then(res=>{
						this.plist = res.data.list;
						//总页数大于页码总数
						  layui.laypage.render({
						    elem: 'pg'
						    ,count: res.data.total //数据总数
						    // jump 是点击分页控件执行方法
						    ,jump: obj=>{
						    	url = "../product/page.s?page="+obj.curr+"&size=10";
						    	url += this.pname ? ("&pname=" + this.pname) : "";
								url += this.shopPrice ? ("&shopPrice=" + this.shopPrice) : "";
						    	axios.get(url).then(res=>{
						    		this.plist = res.data.list;
						    	});
						    }
						  });
					})
				}
			}
		})
	</script>

</body>
</html>